<div class="orderList" id="orderList">
    <script type="text/x-dot-template" id="orderListTemp">
        {{~it.orders:value:index}}
        <div class="orderPanel">
            <div class="orderHead" onclick="showDetail('{{=value.orderNum}}')">
                <div class="blackColor" style="width: 40%;float: left;">A栋B1餐厅></div>
                <div style="width: 40%;float: left;font-size: 12px;">{{=value.orderDate}}</div>
                <div class="blackColor" style="width: 19%;float: right;">{{=value.orderState}}</div>
            </div>
            <div class="order-goods-list">
                <ul>
                    {{~value.orderItems:item:i}}
                    <li>
                        <div class="g-tit">{{=item.itemName}}</div>
                        <div class="g-pri">￥{{=item.itemPrice}}</div>
                        <div class="g-pri">×{{=item.amount}}</div>
                    </li>
                    {{~}}
                </ul>
            </div>
            <div class="orderHead">
                <div class="blackColor" style="width: 40%;float: left;">实付<span style="color: red">￥{{=value.totalPrice}}</span>
                </div>
                <div style="float: right;">
                    {{?value.orderState == '已确认'}}
                    <button value="" onclick="cancelOrder('{{=value.orderNum}}')"
                            style="margin: 5px 0;border:0px;width:80px;height:30px;background-color:#ffc786;border-radius: 5px;color:#FCFCFC;float: right">
                        取消订单
                    </button>
                    {{?}}
                    {{?value.orderState == '待付款'}}
                    <button value="" onclick="payOrder('{{=value.orderNum}}')"
                            style="margin: 5px 0;border:0px;width:80px;height:30px;background-color:#ffc786;border-radius: 5px;color:#FCFCFC;float: right">
                        立即支付
                    </button>
                    {{?}}
                </div>
            </div>
        </div>
        {{~}}
    </script>
</div>
<div style="text-align: center;padding: 20px;">仅显示一个月内订单</div>
<div class="ypfood-head">
    <div class="back-div" onClick="javascript :history.back(-1);"><img
            src="/statics/imgs/head-back.png?v=${params.ver}"></div>
    <div>
        <span class="title-span">订餐记录</span>
    </div>
</div>
<script>
    json("/order/orderList.jspa", {}, function (data) {
        $("#orderList").html(doT.template($("#orderListTemp").html())(data));
    });
    function showDetail(orderSn) {
        window.location.href = "/order/detail.jspa?orderSn=" + orderSn;
    }
    function cancelOrder(orderSn) {
        layer.open({
            content: '你确定取消订单吗？', btn: ['确认', '取消'], yes: function (index) {
                json("/order/cancelOrder.jspa", {orderSn: orderSn}, function (data) {
                    if (data.code == 0) {
                        window.location.reload();
                    } else {
                        layer.open({content: data.description, time: 3});
                    }
                });
            }
        });

    }
    function payOrder(orderSn) {
        window.location.href = "/weixin/weixinPay.jspx?sn=" + orderSn;
    }
</script>